import React, { Component, Fragment } from "react";
// antd
import { Table, Button, Col, Pagination, Form, Select, Tag, Input, Modal, message } from "antd";
// router
import { Link } from "react-router-dom";
// http
import http from '../../utils/request';
import Action from "@c/buttonAction/Index";


const { Option } = Select;

class SecurityScan extends Component {
    constructor(props){
        super(props)
        this.state = {
            loading: false,

            // 分页
            total: '',
            page: 1,
            page_number: 10,

            // 搜索
            search_keyword: null,
            search_type: null,

            // 添加
            visible_add: null,
            visible_edit: null,
            visible_delete: null,

            // 钉钉群
            ops_list_option: [],
            business_list_option: [],

            keyword_id: null,
            keyword_name: null,

            // 表格
            dataSource: [],
            columns: [
                {title: "扫描关键字", dataIndex: "keyword", key: "keyword",
                    render: (text, rowData) => {
                        return(
                            <Link to={`/index/security/scandetail?keyword=${rowData.keyword}`}>{rowData.keyword}</Link>
                        )
                    }
                },
                {title: "类型", dataIndex: "type", key: "type"},
                {title: "运维群", dataIndex: "ops_notify_name", key: "ops_notify_name",
                    render: (text, rowData) => {
                        return(
                            <Tag key={rowData.ops_notify_name} color="green">{rowData.ops_notify_name}</Tag>
                        )
                    }
                },
                {title: "业务群", dataIndex: "business_notify_name", key: "business_notify_name",
                    render: (text, rowData) => {
                        return(
                            <Tag key={rowData.business_notify_name} color="green">{rowData.business_notify_name}</Tag>
                        )
                    }
                },
                {title: "备注", dataIndex: "remark", key: "remark"},
                {title: "操作", dataIndex: "operation", key: "operation", 
                    render: (text, rowData) => {
                        return (
                            <div className="inline-button">
                                <Action>
                                    <Action.Button onClick={() => this.onEditSecurityScanKeywordBtn({rowData: rowData, status: true})}>编辑</Action.Button>
                                    <Action.Button onClick={() => this.onDeleteSecurityScanKeywordBtn(rowData)}>删除</Action.Button>
                                </Action>
                            </div>
                        )
                    }           
                }
            ],
        }
        this.formRefAdd = React.createRef();
        this.formRefEdit = React.createRef();
    }

    componentDidMount() {
        this.loadData()
        this.loadDataOpsDingtalk()
        this.loadDataBusinessDingtalk()
    }

    loadData = () => {
        this.setState({
            loading: true
        })
        const requestData = {
            'page': this.state.page,
            'limit': this.state.page_number,
            'keyword__contains': this.state.search_keyword,
            'type': this.state.search_type
        }
    
        // 获取列表
        http.get('/security/scan', {params: requestData}).then(response=>{
            this.setState({
                dataSource: response.data.data.items,
                total: response.data.data.pages.total,
                loading: false
            })
        }).catch()
    }

    // 切换每页数量
    onChangeSizePage = (page, page_number) => {
        this.setState({
            page: page,
            page_number: page_number,
        }, () => {
            this.loadData()
        })
    }

     /** 搜索 */
    onFinishSearch = (data) => {
        this.setState({
            search_keyword: data.keyword ? data.keyword : null,
            search_type: data.type ? data.type : null,
            page: 1
        })
        this.loadData()
    }

    // 获取运维钉钉群列表
    loadDataOpsDingtalk = () => {
        // 获取云平台列表
        const requestData = {
            'page': 1,
            'limit': 1000,
        }
        http.get('/notify/group', {params: requestData}).then(response=> {
            const resp_data = response.data.data.items
            const ops_list_option = []
            for (let i = 0; i < resp_data.length; i++) {
                ops_list_option.push(<Option key={resp_data[i].id}>{resp_data[i].group_title}</Option>)
            }
            this.setState({
                ops_list_option: ops_list_option,
            })
        })
    }

    // 获取业务钉钉群列表
    loadDataBusinessDingtalk = () => {
        // 获取云平台列表
        const requestData = {
            'page': 1,
            'limit': 1000,
        }
        http.get('/notify/business/group', {params: requestData}).then(response=> {
            const resp_data = response.data.data.items
            const business_list_option = []
            for (let i = 0; i < resp_data.length; i++) {
                business_list_option.push(<Option key={resp_data[i].id}>{resp_data[i].group_title}</Option>)
            }
            this.setState({
                business_list_option: business_list_option,
            })
        })
    }

    // 添加扫描关键字
    onAddSecurityScanKeywordBtn = () => {
        this.setState({
            visible_add: true
        })
    }

    // 添加扫描关键字提交
    onFinishAdd = (data) => {
        const requestData = {
            keyword: data.keyword,
            ops_notify_id: data.ops_notify_id,
            business_notify_id: data.business_notify_id,
            remark: data.remark,
            type: data.type
        }
        http.post('/security/scan', requestData).then(response=>{
            message.success(response.data.msg)
            this.setState({
                visible_add: false,
            })
            this.formRefAdd.current.resetFields()
            this.loadData()
        }).catch()
    }

    // 添加扫描关键字取消
    onFinishAddCancel = () => {
        this.setState({
            visible_add: false
        })
        this.formRefAdd.current.resetFields()
    }

    // 编辑扫描关键字
    onEditSecurityScanKeywordBtn = (data) => {
        this.setState({
            visible_edit: true,
        })

        http.get('/security/scan').then(response=> {
            this.formRefEdit.current.setFieldsValue({
                id: data.rowData.id,
                keyword: data.rowData.keyword,
                ops_notify_id: data.rowData.ops_notify_id,
                business_notify_id: data.rowData.business_notify_id,
                remark: data.rowData.remark,
            })
        })
    }

    // 添编辑描关键字取消
    onFinishEditCancel = () => {
        this.setState({
            visible_edit: false
        })
        this.formRefEdit.current.resetFields()
    }

    // 添加扫描关键字提交
    onFinishEdit = (data) => {
        const requestData = {
            keyword: data.keyword,
            ops_notify_id: data.ops_notify_id ? data.ops_notify_id : null,
            business_notify_id: data.business_notify_id ? data.business_notify_id : null,
            remark: data.remark
        }
        http.put('/security/scan/' + data.id, requestData).then(response=>{
            message.success(response.data.msg)
            this.setState({
                visible_edit: false
            })
            this.formRefEdit.current.resetFields();
            this.loadData()
        }).catch()
    }

    /** 删除按钮 */
    onDeleteSecurityScanKeywordBtn = (data) => {
        this.setState({
            keyword_id: data.id,
            keyword_name: data.name,
            visible_delete: true
        })
    }

    /** 删除扫描关键字提交 */
    handleSecurityKeywordDelete = () => {
        http.delete('/security/scan/' + this.state.keyword_id).then(response=>{
            message.success(response.data.msg)
            this.setState({
                visible_delete: false,
            })
            this.loadData()
        }).catch()    
    }

    render(){
        const { loading, columns, dataSource, page, total, visible_add, visible_edit, visible_delete, ops_list_option, business_list_option, keyword_name } = this.state
        const rowSelection = {
            onChange: this.onCheckbox
        }
        var myStyle = {margin: '20px'}
        var myStyle1 = {margin: '10px', float: 'right'}
        var myStyleForm = {marginRight: '10px', marginTop: '5px'}

        return (
            <Fragment>
                <Form layout="inline" onFinish={this.onFinishSearch} size="small">  

                    <Form.Item label="扫描关键字" name="keyword" style={myStyleForm}>
                        <Input placeholder="请输入扫描关键字"  />
                    </Form.Item>

                    <Form.Item label="类型" name="type" style={myStyleForm}>
                        <Select
                            allowClear
                            showSearch
                            placeholder="类型"
                            style={{ width: 180 }}
                            >
                            <Option key="AccessKey">AccessKey</Option>
                            <Option key="关键字">关键字</Option>
                            <Option key="其他">其他</Option>
                        </Select>  
                    </Form.Item>

                    <Form.Item shouldUpdate={true} style={myStyleForm}>
                        <Button type="primary" htmlType="submit">搜索</Button>
                    </Form.Item>
                </Form>

                <div style={myStyle1}>
                    <Button type="primary" onClick={this.onAddSecurityScanKeywordBtn}>添加扫描关键字</Button>
                </div>

                <Table
                    size="small"
                    pagination={false} 
                    rowSelection={rowSelection} 
                    rowKey="id" 
                    columns={columns} 
                    dataSource={dataSource}
                    loading={loading}
                    scroll={{ y: 600, x: '70vw' }}
                >
                </Table>

                <div style={myStyle}>
                    <Col span={16}>
                        <Pagination
                            onChange={this.onChangeSizePage}
                            current={page}
                            total={total}
                            showSizeChanger
                            showQuickJumper
                            showTotal={total => `Total ${total} items`}
                        />
                    </Col>
                </div>

                <Modal
                    title="添加扫描关键字"
                    visible={visible_add}
                    onCancel={this.onFinishAddCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                >
                    <Form
                        onFinish={this.onFinishAdd}
                        ref={this.formRefAdd}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 14 }}
                    >
                        <Form.Item label="关键字" name="keyword" rules={[{ required: true}]}>
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="类型" name="type" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                placeholder="类型"
                                >
                                <Option key="关键字">关键字</Option>
                                <Option key="其他">其他</Option>
                            </Select>
                        </Form.Item>

                        <Form.Item label="运维钉钉群" name="ops_notify_id">
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择运维钉钉群"
                                >
                                {ops_list_option}
                            </Select>
                        </Form.Item>

                        <Form.Item label="业务钉钉群" name="business_notify_id">
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择业务钉钉群"
                                >
                                {business_list_option}
                            </Select>
                        </Form.Item>

                        <Form.Item label="备注" name="remark">
                            <Input></Input>
                        </Form.Item>

                        <Form.Item>
                            <Button htmlType="submit" type="primary">确定</Button>
                        </Form.Item>                                                               
                    </Form>           
                </Modal>

                <Modal
                    title="编辑扫描关键字"
                    visible={visible_edit}
                    onCancel={this.onFinishEditCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                >
                    <Form
                        onFinish={this.onFinishEdit}
                        ref={this.formRefEdit}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 14 }}
                    >
                        <Form.Item label="关键字ID" name="id" hidden>
                            <Input ></Input>
                        </Form.Item>

                        <Form.Item label="关键字" name="keyword" rules={[{ required: true}]}>
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="运维钉钉群" name="ops_notify_id">
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择运维钉钉群"
                                >
                                {ops_list_option}
                            </Select>
                        </Form.Item>

                        <Form.Item label="业务钉钉群" name="business_notify_id">
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择业务钉钉群"
                                >
                                {business_list_option}
                            </Select>
                        </Form.Item>

                        <Form.Item label="备注" name="remark">
                            <Input></Input>
                        </Form.Item>

                        <Form.Item>
                            <Button htmlType="submit" type="primary">确定</Button>
                        </Form.Item>                                                               
                    </Form>           
                </Modal>

                <Modal
                    title="删除云账户"
                    visible={visible_delete}
                    onOk={this.handleSecurityKeywordDelete}
                    onCancel={() => {this.setState({visible_delete: false, keyword_id: ''})}}
                    okText="确认"
                    cancelText="取消"
                >
                    <p>确定删除扫描关键字<span style={{color: 'red'}}> {keyword_name}</span>? 删除后将无法恢复</p>
                </Modal>

            </Fragment>
        )
    }
}

export default SecurityScan;